<template>
	<view class="page-backgroud">
		<view>
			<input class="input-search" 
			@input="search()" v-model="searchinput"
			placeholder="  请输入医生名/科室名" />
		</view>
		<view class="appoint-record-box" v-for="(e,i) in guhaoRecordList" :key="e.id">
			<view class="top-title">
				<text class="left"> {{e.riqi}} {{checkXIngqi(e.riqi)}}</text>
				<button class="tuihao-button" @click="tuihao(e.id)" v-if="e.deleteflag==0&&checkdate(e.riqi)">退号</button>
				<button class="tuihao-button" @click="pingjia(e.id,e.doctorName,e.keshiName)" v-if="e.deleteflag==2">评价</button>
			</view>
			<view class="appoint-info">
				<text class="left balck-text">医生：</text>
				<text class="right"> {{e.doctorName}} </text>
			</view>
			<view class="appoint-info">
				<text class="left balck-text">时间：</text>
				<text class="right">{{e.shijian}}</text>
			</view>
			<view class="appoint-info">
				<text class="left balck-text">医院：</text>
				<text class="right"> 中国医科大学附属医院 </text>
			</view>
			<view class="appoint-info">
				<text class="left balck-text">诊室：</text>
				<text class="right"> {{e.keshiName}}</text>
			</view>
			<view class="appoint-info">
				<text class="left balck-text">患者：</text>
				<text class="right"> {{e.yonghuName}} (排队号：
					<text style="color: #7EC0EE;">{{e.okflag}}</text>)
				</text>
			</view>
			<view class="appoint-info">
				<text class="left balck-text">费用：</text>
				<text class="right">{{e.feiyongflag}}元</text>
			</view>
			<view class="appoint-info">
				<text class="left balck-text">状态：</text>
				<!-- 状态是4证明正常就诊，所以是灰色 -->
				<text class="right gray-text" v-if="e.deleteflag==0&&!checkdate(e.riqi)">已过期</text>
				<text class="right green-text" v-if="e.deleteflag==0&&checkdate(e.riqi)">已预约</text>
				<text class="right red-text" v-if="e.deleteflag==1">已取消</text>
				<text class="right green-text" v-if="e.deleteflag==2">已就诊</text>
			</view>
		</view>
		<view class="loading">{{loadingText}}</view>
	</view>
</template>

<script> 
	import {error} from '@/common/js/errorTips.js'
	import {
		seemyYuYue,
		tuihao,
	} from '@/common/api/jh/doctor.js'
	export default {
		data() {
			return {
				guhaoRecordList: [], // 挂号记录列表
				loadingText: '到底啦...',
				page: 1,
				TabCur: 0,
				scrollLeft: 0,
				searchinput: '',
				list: [],
			}
		},
		methods: {
			seemyYuYue(){
				var yonghu = uni.getStorageSync('userLoginInfo.id')
				seemyYuYue(yonghu).then(res => {
					this.guhaoRecordList = res.data
					this.list = res.data;
				}).catch(() => {
					error('网络故障')
				})
			},
			search(){
				var dinput = this.searchinput;
				console.log(dinput+"-------")
				var data = this.list;
				if(dinput!=''){
					var newdata = []
					data.forEach(function(e,i){
						if(e.doctorName.startsWith(dinput)||e.keshiName.startsWith(dinput)){
							newdata.push(e);
						}
					});
					this.guhaoRecordList = newdata
				}else{
					this.guhaoRecordList = data
				}
			},
			checkXIngqi(e){
				var date = new Date(e);
				var week = date.getDay();
				var str = ""; 
				if (week == 0) { 
				        str = "星期日"; 
				} else if (week == 1) { 
				        str = "星期一"; 
				} else if (week == 2) { 
				        str = "星期二"; 
				} else if (week == 3) { 
				        str = "星期三"; 
				} else if (week == 4) { 
				        str = "星期四"; 
				} else if (week == 5) { 
				        str = "星期五"; 
				} else if (week == 6) { 
				        str = "星期六"; 
				} 
				return str;
			},
			pingjia(id,doctorName,keshiName){
				uni.setStorageSync('toPjiuzhengid',id)
				uni.setStorageSync('toPysheng',doctorName)
				uni.setStorageSync('toPkeshi',keshiName)
				uni.navigateTo({
					url: '/pages/yuyue/qupingjia'
				})
			},
			tuihao(id){
				var that = this
				uni.showModal({
					title: '提示',
					content: '是否取消该次预约，将视为一次失信',
					success: function(res) {
						if (res.confirm) {
							tuihao(id).then(res => {
								uni.showToast({
									title: '退号成功'
								})
								that.seemyYuYue()
							})
						}
					}
				})
			},
			checkdate(bijiao){
				var date1 = new Date();
				var date2 = new Date(bijiao);
				var num = date2.getTime() - date1.getTime();
				if(date1.getTime()>date2.getTime()){
					return false;
				}else{
					return true;
				}
			}
		},
		onLoad(bijiao) {
			this.seemyYuYue()
			
		}
	}
</script>

<style lang="scss">
	@import '@/common/scss/common.scss';

	// 一个个的数据块
	.appoint-record-box {
		@include width-margin(90%, auto);
		border-radius: 6px;
		overflow: hidden;
		background-color: #FFFFFF;
		margin-top: 30rpx;

		.top-title {
			@include width-margin(90%, 80rpx);
			line-height: 80rpx;
			@include row-left-right(50%, 50%);
			@include font-style(16px, 500, $major-color);
			border-bottom: 1px solid $uni-border-color;
		}

		.appoint-info {
			@include width-margin(90%, 70rpx);
			line-height: 70rpx;
			@include row-left-right(20%, 80%);
			@include font-style(16px, 500, $gray-color);
			align-items: center;

			// 当用户还没到就就诊的时间看到的
			.green-text {
				@include font-style(16px, 500, #6EC823);
			}

			// 有失信时的状态颜色
			.red-text {
				@include font-style(16px, 500, #CE1229);
			}

			// 排队号的颜色
			.balck-text {
				@include font-style(16px, 500, #000000);
			}

			// /取消预约按钮
			.cancel-button {
				float: right;
				width: 60px;
				height: 25px;
				line-height: 25px;
				font-size: 14px;
				font-family: '宋体';
				color: #55aaff;
				margin-left: 60%;
				margin-top: 10px;
				margin-bottom: 10px;
			}
		}
	}
	.tuihao-button{
		float: right;
		height: 20px;
		line-height: 20px;
		font-size: 14px;
		font-family: '宋体';
		color: #55aaff;
		margin-left: 31%;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	.appoint-record-box:last-child {
		margin-bottom: 30rpx;
	}
	.loading {
		text-align: center;
		line-height: 80px;
		font-family: '宋体';
		color: #a6a6a6;
	}
	.input-search{
		margin: 10px;
		background-color: white;
		border-radius: 5px;
		padding-top:10px;
		text-align: center;
		padding-bottom: 5px;
	}
</style>
